<template>
  <view class="login-container">
    <!-- 标题 -->
    <view class="title">手机号登录</view>
    
    <!-- 手机号输入区域 -->
    <view class="input-item">
      <text class="label">手机号</text>
      <input 
        class="input" 
        type="number" 
        placeholder="请输入手机号" 
        @focus="focusInput('phone')"
        @blur="blurInput('phone')"
        v-model="phone"
        maxlength="11"
      />
      <view class="input-line" :class="{ 'active': focusedInput === 'phone' }"></view>
    </view>
    
    <!-- 密码输入区域 -->
    <view class="input-item">
      <text class="label">密码</text>
      <input 
        class="input" 
        type="password" 
        placeholder="请输入密码" 
        @focus="focusInput('password')"
        @blur="blurInput('password')"
        v-model="password"
      />
      <view class="input-line" :class="{ 'active': focusedInput === 'password' }"></view>
    </view>
    
    <!-- 登录按钮 -->
    <button class="login-btn" @click="handleLogin" :disabled="loginLoading">
      {{ loginLoading ? '登录中...' : '登录' }}
    </button>
    
    <!-- 位置信息获取提示弹窗 -->
    <view class="location-modal" v-if="showLocationModal">
      <view class="modal-content">
        <text class="tip-title">获取你的位置信息</text>
        <text class="tip-desc">你的位置信息将用于获取你附近的站点</text>
        <view class="btn-group">
          <button class="location-btn reject-btn" @click="rejectLocation">拒绝</button>
          <button class="location-btn allow-btn" @click="allowLocation">允许</button>
        </view>
      </view>
    </view>
    <!-- 遮罩层 -->
    <view class="modal-mask" v-if="showLocationModal" @click="rejectLocation"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      password: '',
      focusedInput: '', // 记录当前聚焦的输入框
      showLocationModal: true, // 控制位置弹窗显示与隐藏
      loginLoading: false // 登录加载状态
    }
  },
  onLoad() {
    // 页面加载时显示位置弹窗
    this.showLocationModal = true;
  },
  methods: {
    // 输入框聚焦
    focusInput(type) {
      this.focusedInput = type;
    },
    
    // 输入框失焦
    blurInput() {
      this.focusedInput = '';
    },
    
    // 验证手机号格式
    validatePhone(phone) {
      const phoneRegex = /^1[3-9]\d{9}$/;
      return phoneRegex.test(phone);
    },
    
    // 登录方法
    async handleLogin() {
      // 表单验证
      if (!this.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        });
        return;
      }
      
      if (!this.validatePhone(this.phone)) {
        uni.showToast({
          title: '请输入正确的手机号格式',
          icon: 'none'
        });
        return;
      }
      
      if (!this.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        });
        return;
      }
      
      if (this.password.length < 6) {
        uni.showToast({
          title: '密码长度不能少于6位',
          icon: 'none'
        });
        return;
      }
      
      this.loginLoading = true;
      
      try {
        const response = await this.loginApi({
          phone: this.phone,
          password: this.password
        });
        
        if (response.code === 200) {
          // 登录成功，保存token和用户信息
          const { access_token, expires_in, user_info } = response.data;
          
          // 兼容新的request.js，同时保存两种格式的token
          uni.setStorageSync('token', access_token); // 新request.js使用的key
          uni.setStorageSync('access_token', access_token); // 原有的key
          uni.setStorageSync('user_info', user_info);
          
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          });
          
          // 延迟跳转到首页
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/index/index'
            });
          }, 1500);
          
        } else {
          uni.showToast({
            title: response.msg || '登录失败',
            icon: 'none'
          });
        }
        
      } catch (error) {
        console.error('登录错误:', error);
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        });
      } finally {
        this.loginLoading = false;
      }
    },
    
    // 调用登录API
    loginApi(data) {
      // 使用新的request工具，登录接口不需要携带token
      const { post } = require('../../utils/request.js');
      return post('/mobile/user/login', data, { loading: false });
    },
    
    // 拒绝位置信息
    rejectLocation() {
      this.showLocationModal = false;
      uni.showToast({
        title: '已拒绝位置获取',
        icon: 'none'
      });
    },
    
    // 允许位置信息
    allowLocation() {
      uni.getLocation({
        type: 'wgs84',
        success(res) {
          console.log('位置信息：', res);
          this.showLocationModal = false;
          uni.showToast({
            title: '已允许位置获取',
            icon: 'none'
          });
        },
        fail(err) {
          console.error('获取位置失败：', err);
          this.showLocationModal = false;
          uni.showToast({
            title: '获取位置失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.login-container {
  padding: 40rpx 20rpx;
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
}

.title {
  font-size: 36rpx;
  font-weight: normal;
  margin-bottom: 60rpx;
  text-align: left;
}

.input-item {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  position: relative;
  padding-bottom: 10rpx;
}

.label {
  width: 120rpx;
  font-size: 28rpx;
}

.input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  padding: 0 10rpx;
}

.get-code-btn {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #E6E6E6;
  color: #007AFF;
  font-size: 26rpx;
  border-radius: 10rpx;
}

.input-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2rpx;
  background-color: #ccc; /* 未选中时的灰色 */
  transition: background-color 0.3s ease;
}

.input-line.active {
  background-color: #007AFF; /* 选中时的蓝色 */
}

.login-btn {
  margin-top: 120rpx;
  background-color: #007AFF;
  color: #fff;
  font-size: 30rpx;
  border-radius: 10rpx;
  height: 90rpx;
  line-height: 90rpx;
  transition: all 0.3s ease;
}

.login-btn:disabled {
  background-color: #ccc;
  color: #666;
}

/* 位置弹窗样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

.location-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.2);
}

.tip-title {
  font-size: 30rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
  text-align: left;
}

.tip-desc {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 40rpx;
  line-height: 1.5;
}

.btn-group {
  display: flex;
  justify-content: space-around;
}

.location-btn {
  width: 220rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.reject-btn {
  background-color: #f5f5f5;
  color: #00CC66;
}

.allow-btn {
  background-color: #00CC66;
  color: #fff;
}
</style>